<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        width:100px;
        height:100px;
        margin:0 auto;
        background:yellow;
    }
</style>
<body>
    <div class="container">

    </div>
   
    <script>
        //  <!-- 场景一：点击元素两秒钟后，元素的背景色变为粉色 -->
        let div = document.querySelector('.container');
       
        div.addEventListener('click',function(){
            //这是之前的写法

            // let that = this; //这是因为这个this指向的时div,把div的内容赋值给that就可以用了
            // setTimeout(function(){
            //     that.style.background = 'pink'

            // },2000)

            //这是用箭头函数的写法
            setTimeout(() =>{
                this.style.background = 'pink'
            },2000)
           
        })

        //场景二、从数组中返回偶数
        const num = [11,34,67,88,46,97];
        //这是传统的写法
        const result = num.filter(function(item){
            if( item % 2 == 0){
                return true;
            }else{
                return false;
            }
        })
        console.log(result);

        //使用箭头函数的写法
        const res = num.filter(item => item % 2 == 0)
        console.log(res);

        //箭头函数适用 与this 无关的问题，定时器，数组的方法回调
        //箭头函数不适用 与this 有关的问题， 事件回调，对象的方法


    </script>
</body>
</html>